import React, { useMemo, useRef, useState } from 'react';
import { useVirtualList } from 'ahooks';
import { Table, Pagination } from 'antd';
import Mock from 'mockjs';
import './index.less';

export default function UseVirtualList() {
  const [pageSize, setPageSize] = useState(10);
  const containerRef = useRef(null);
  const wrapperRef = useRef(null);
  const originalList = useMemo(
    () =>
      Array.from(
        Array(pageSize)
          .fill(1)
          .map((item, index) => ({ id: index, content: Mock.mock('@cparagraph(10,20)') })),
      ),
    [pageSize],
  );
  const [list] = useVirtualList(originalList, {
    containerTarget: containerRef,
    wrapperTarget: wrapperRef,
    itemHeight: 100,
    overscan: 10,
  });

  const onChange = (current, size) => {
    setPageSize(size);
  };
  return (
    <>
      <div ref={containerRef} style={{ height: '500px', overflow: 'auto', marginBottom: 20 }}>
        <Table
          rowKey="id"
          ref={wrapperRef}
          columns={[
            { title: 'id', dataIndex: 'id' },
            { title: '内容', dataIndex: 'content' },
          ]}
          dataSource={list.map(item => item.data)}
          pagination={false}
        />
      </div>
      <Pagination
        total={9999}
        onShowSizeChange={onChange}
        pageSize={pageSize}
        pageSizeOptions={[10, 100, 1000, 10000]}
      />
    </>
  );
}
